<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能日期差计算器 - 多场景应用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .main-content {
            padding: 40px;
        }

        .scenarios {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .scenario-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid #e0e0e0;
            transition: all 0.3s ease;
        }

        .scenario-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .scenario-title {
            font-size: 1.3em;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .scenario-icon {
            width: 30px;
            height: 30px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .date-inputs {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .date-group {
            flex: 1;
            min-width: 200px;
        }

        .date-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
        }

        .date-group input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        .date-group input:focus {
            outline: none;
            border-color: #4facfe;
        }

        .calculate-btn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            width: 100%;
        }

        .calculate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            font-weight: 500;
            display: none;
        }

        .result.success {
            background: linear-gradient(135deg, #a8edea, #fed6e3);
            color: #2c5530;
            border: 1px solid #a8edea;
        }

        .result.warning {
            background: linear-gradient(135deg, #ffecd2, #fcb69f);
            color: #8b4513;
            border: 1px solid #ffecd2;
        }

        .result.danger {
            background: linear-gradient(135deg, #ff9a9e, #fecfef);
            color: #8b0000;
            border: 1px solid #ff9a9e;
        }

        .result.info {
            background: linear-gradient(135deg, #a8caba, #5d4e75);
            color: white;
            border: 1px solid #a8caba;
        }

        .dashboard {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin-top: 30px;
        }

        .dashboard h2 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.8em;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .stat-item {
            background: rgba(255, 255, 255, 0.2);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            backdrop-filter: blur(10px);
        }

        .stat-number {
            font-size: 2em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 0.9em;
            opacity: 0.9;
        }

        .quick-actions {
            display: flex;
            gap: 15px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .quick-btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .quick-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        .footer {
            background: #f8f9fa;
            padding: 20px;
            text-align: center;
            color: #666;
            border-top: 1px solid #e0e0e0;
        }

        @media (max-width: 768px) {
            .scenarios {
                grid-template-columns: 1fr;
            }
            
            .date-inputs {
                flex-direction: column;
            }
            
            .header h1 {
                font-size: 2em;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>📅 智能日期差计算器</h1>
            <p>多场景业务应用 - 精确计算时间差异</p>
        </div>

        <div class="main-content">
            <div class="scenarios">
                <!-- 项目进度管理 -->
                <div class="scenario-card">
                    <div class="scenario-title">
                        <div class="scenario-icon">📊</div>
                        项目进度管理
                    </div>
                    <div class="date-inputs">
                        <div class="date-group">
                            <label>项目开始日期</label>
                            <input type="date" id="project-start" value="2024-01-15">
                        </div>
                        <div class="date-group">
                            <label>项目截止日期</label>
                            <input type="date" id="project-end" value="2024-06-30">
                        </div>
                    </div>
                    <button class="calculate-btn" onclick="calculateProjectProgress()">计算项目进度</button>
                    <div id="project-result" class="result"></div>
                </div>

                <!-- 员工假期管理 -->
                <div class="scenario-card">
                    <div class="scenario-title">
                        <div class="scenario-icon">🏖️</div>
                        员工假期管理
                    </div>
                    <div class="date-inputs">
                        <div class="date-group">
                            <label>假期开始日期</label>
                            <input type="date" id="vacation-start" value="2024-07-01">
                        </div>
                        <div class="date-group">
                            <label>假期结束日期</label>
                            <input type="date" id="vacation-end" value="2024-07-15">
                        </div>
                    </div>
                    <button class="calculate-btn" onclick="calculateVacationDays()">计算假期天数</button>
                    <div id="vacation-result" class="result"></div>
                </div>

                <!-- 合同到期提醒 -->
                <div class="scenario-card">
                    <div class="scenario-title">
                        <div class="scenario-icon">📋</div>
                        合同到期提醒
                    </div>
                    <div class="date-inputs">
                        <div class="date-group">
                            <label>合同签署日期</label>
                            <input type="date" id="contract-start" value="2023-01-01">
                        </div>
                        <div class="date-group">
                            <label>合同到期日期</label>
                            <input type="date" id="contract-end" value="2024-12-31">
                        </div>
                    </div>
                    <button class="calculate-btn" onclick="calculateContractStatus()">检查合同状态</button>
                    <div id="contract-result" class="result"></div>
                </div>

                <!-- 活动倒计时 -->
                <div class="scenario-card">
                    <div class="scenario-title">
                        <div class="scenario-icon">🎉</div>
                        活动倒计时
                    </div>
                    <div class="date-inputs">
                        <div class="date-group">
                            <label>当前日期</label>
                            <input type="date" id="current-date" value="">
                        </div>
                        <div class="date-group">
                            <label>活动日期</label>
                            <input type="date" id="event-date" value="2024-12-25">
                        </div>
                    </div>
                    <button class="calculate-btn" onclick="calculateEventCountdown()">计算倒计时</button>
                    <div id="event-result" class="result"></div>
                </div>

                <!-- 贷款还款计划 -->
                <div class="scenario-card">
                    <div class="scenario-title">
                        <div class="scenario-icon">💰</div>
                        贷款还款计划
                    </div>
                    <div class="date-inputs">
                        <div class="date-group">
                            <label>贷款发放日期</label>
                            <input type="date" id="loan-start" value="2024-03-01">
                        </div>
                        <div class="date-group">
                            <label>还款到期日期</label>
                            <input type="date" id="loan-end" value="2027-03-01">
                        </div>
                    </div>
                    <button class="calculate-btn" onclick="calculateLoanPeriod()">计算贷款期限</button>
                    <div id="loan-result" class="result"></div>
                </div>

                <!-- 产品保质期 -->
                <div class="scenario-card">
                    <div class="scenario-title">
                        <div class="scenario-icon">📦</div>
                        产品保质期
                    </div>
                    <div class="date-inputs">
                        <div class="date-group">
                            <label>生产日期</label>
                            <input type="date" id="production-date" value="2024-01-01">
                        </div>
                        <div class="date-group">
                            <label>当前日期</label>
                            <input type="date" id="current-date-2" value="">
                        </div>
                    </div>
                    <button class="calculate-btn" onclick="calculateShelfLife()">检查保质期</button>
                    <div id="shelf-result" class="result"></div>
                </div>
            </div>

            <!-- 数据统计面板 -->
            <div class="dashboard">
                <h2>📈 数据统计面板</h2>
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-number" id="total-calculations">0</div>
                        <div class="stat-label">总计算次数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" id="avg-days">0</div>
                        <div class="stat-label">平均天数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" id="max-days">0</div>
                        <div class="stat-label">最长周期</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" id="min-days">0</div>
                        <div class="stat-label">最短周期</div>
                    </div>
                </div>
                <div class="quick-actions">
                    <button class="quick-btn" onclick="setTodayDates()">设置今日日期</button>
                    <button class="quick-btn" onclick="clearAllResults()">清空所有结果</button>
                    <button class="quick-btn" onclick="exportData()">导出数据</button>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>© 2024 智能日期差计算器 | 专业的时间管理工具</p>
        </div>
    </div>

    <script>
        // 核心日期差计算函数
        const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
            Math.round((dateFinal - dateInitial) / (1000 * 3600 * 24));

        // 全局变量
        let calculations = [];
        let totalCalculations = 0;

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('current-date').value = today;
            document.getElementById('current-date-2').value = today;
        });

        // 项目进度管理
        function calculateProjectProgress() {
            const startDate = new Date(document.getElementById('project-start').value);
            const endDate = new Date(document.getElementById('project-end').value);
            const currentDate = new Date();
            
            const totalDays = getDaysDiffBetweenDates(startDate, endDate);
            const elapsedDays = getDaysDiffBetweenDates(startDate, currentDate);
            const remainingDays = getDaysDiffBetweenDates(currentDate, endDate);
            const progress = Math.round((elapsedDays / totalDays) * 100);
            
            let resultClass = 'success';
            let message = '';
            
            if (remainingDays < 0) {
                resultClass = 'danger';
                message = `⚠️ 项目已超期 ${Math.abs(remainingDays)} 天！`;
            } else if (remainingDays <= 30) {
                resultClass = 'warning';
                message = `⏰ 项目即将到期，还剩 ${remainingDays} 天`;
            } else {
                message = `📊 项目进度：${progress}% | 已进行 ${elapsedDays} 天，剩余 ${remainingDays} 天`;
            }
            
            showResult('project-result', message, resultClass);
            updateStats(totalDays);
        }

        // 员工假期管理
        function calculateVacationDays() {
            const startDate = new Date(document.getElementById('vacation-start').value);
            const endDate = new Date(document.getElementById('vacation-end').value);
            
            const vacationDays = getDaysDiffBetweenDates(startDate, endDate);
            
            let resultClass = 'success';
            let message = '';
            
            if (vacationDays <= 0) {
                resultClass = 'danger';
                message = '❌ 结束日期不能早于开始日期！';
            } else if (vacationDays > 30) {
                resultClass = 'warning';
                message = `⚠️ 假期较长：${vacationDays} 天，请确认是否合理`;
            } else {
                message = `🏖️ 假期天数：${vacationDays} 天 | 工作日：${Math.max(0, vacationDays - Math.floor(vacationDays / 7) * 2)} 天`;
            }
            
            showResult('vacation-result', message, resultClass);
            updateStats(vacationDays);
        }

        // 合同到期提醒
        function calculateContractStatus() {
            const startDate = new Date(document.getElementById('contract-start').value);
            const endDate = new Date(document.getElementById('contract-end').value);
            const currentDate = new Date();
            
            const totalDays = getDaysDiffBetweenDates(startDate, endDate);
            const remainingDays = getDaysDiffBetweenDates(currentDate, endDate);
            
            let resultClass = 'success';
            let message = '';
            
            if (remainingDays < 0) {
                resultClass = 'danger';
                message = `🚨 合同已过期 ${Math.abs(remainingDays)} 天！请立即处理`;
            } else if (remainingDays <= 90) {
                resultClass = 'warning';
                message = `⚠️ 合同即将到期，还剩 ${remainingDays} 天 | 总期限：${totalDays} 天`;
            } else {
                message = `✅ 合同正常，剩余 ${remainingDays} 天 | 总期限：${totalDays} 天`;
            }
            
            showResult('contract-result', message, resultClass);
            updateStats(totalDays);
        }

        // 活动倒计时
        function calculateEventCountdown() {
            const currentDate = new Date(document.getElementById('current-date').value);
            const eventDate = new Date(document.getElementById('event-date').value);
            
            const countdownDays = getDaysDiffBetweenDates(currentDate, eventDate);
            
            let resultClass = 'info';
            let message = '';
            
            if (countdownDays < 0) {
                resultClass = 'danger';
                message = `🎉 活动已于 ${Math.abs(countdownDays)} 天前结束`;
            } else if (countdownDays === 0) {
                resultClass = 'warning';
                message = '🎊 活动就在今天！';
            } else if (countdownDays <= 7) {
                resultClass = 'warning';
                message = `⏰ 活动即将开始，倒计时 ${countdownDays} 天！`;
            } else {
                message = `📅 距离活动还有 ${countdownDays} 天`;
            }
            
            showResult('event-result', message, resultClass);
            updateStats(Math.abs(countdownDays));
        }

        // 贷款还款计划
        function calculateLoanPeriod() {
            const startDate = new Date(document.getElementById('loan-start').value);
            const endDate = new Date(document.getElementById('loan-end').value);
            
            const loanDays = getDaysDiffBetweenDates(startDate, endDate);
            const loanYears = Math.round(loanDays / 365 * 10) / 10;
            const loanMonths = Math.round(loanDays / 30 * 10) / 10;
            
            let resultClass = 'info';
            let message = '';
            
            if (loanDays <= 0) {
                resultClass = 'danger';
                message = '❌ 还款日期不能早于放款日期！';
            } else if (loanYears > 30) {
                resultClass = 'warning';
                message = `⚠️ 贷款期限较长：${loanYears} 年 (${loanDays} 天)`;
            } else {
                message = `💰 贷款期限：${loanYears} 年 (${loanMonths} 个月，${loanDays} 天)`;
            }
            
            showResult('loan-result', message, resultClass);
            updateStats(loanDays);
        }

        // 产品保质期
        function calculateShelfLife() {
            const productionDate = new Date(document.getElementById('production-date').value);
            const currentDate = new Date(document.getElementById('current-date-2').value);
            
            const shelfLifeDays = getDaysDiffBetweenDates(productionDate, currentDate);
            
            let resultClass = 'success';
            let message = '';
            
            if (shelfLifeDays < 0) {
                resultClass = 'danger';
                message = '❌ 生产日期不能晚于当前日期！';
            } else if (shelfLifeDays > 365) {
                resultClass = 'danger';
                message = `🚨 产品已超过1年保质期！已存放 ${shelfLifeDays} 天`;
            } else if (shelfLifeDays > 300) {
                resultClass = 'warning';
                message = `⚠️ 产品即将过期，已存放 ${shelfLifeDays} 天`;
            } else {
                message = `✅ 产品在保质期内，已存放 ${shelfLifeDays} 天`;
            }
            
            showResult('shelf-result', message, resultClass);
            updateStats(shelfLifeDays);
        }

        // 显示结果
        function showResult(elementId, message, className) {
            const element = document.getElementById(elementId);
            element.textContent = message;
            element.className = `result ${className}`;
            element.style.display = 'block';
        }

        // 更新统计数据
        function updateStats(days) {
            calculations.push(days);
            totalCalculations++;
            
            const avgDays = Math.round(calculations.reduce((a, b) => a + b, 0) / calculations.length);
            const maxDays = Math.max(...calculations);
            const minDays = Math.min(...calculations);
            
            document.getElementById('total-calculations').textContent = totalCalculations;
            document.getElementById('avg-days').textContent = avgDays;
            document.getElementById('max-days').textContent = maxDays;
            document.getElementById('min-days').textContent = minDays;
        }

        // 设置今日日期
        function setTodayDates() {
            const today = new Date().toISOString().split('T')[0];
            const dateInputs = document.querySelectorAll('input[type="date"]');
            dateInputs.forEach(input => {
                if (input.id.includes('current') || input.id.includes('today')) {
                    input.value = today;
                }
            });
        }

        // 清空所有结果
        function clearAllResults() {
            const results = document.querySelectorAll('.result');
            results.forEach(result => {
                result.style.display = 'none';
            });
            
            calculations = [];
            totalCalculations = 0;
            document.getElementById('total-calculations').textContent = '0';
            document.getElementById('avg-days').textContent = '0';
            document.getElementById('max-days').textContent = '0';
            document.getElementById('min-days').textContent = '0';
        }

        // 导出数据
        function exportData() {
            const data = {
                totalCalculations: totalCalculations,
                averageDays: calculations.length > 0 ? Math.round(calculations.reduce((a, b) => a + b, 0) / calculations.length) : 0,
                maxDays: calculations.length > 0 ? Math.max(...calculations) : 0,
                minDays: calculations.length > 0 ? Math.min(...calculations) : 0,
                calculations: calculations,
                exportDate: new Date().toISOString()
            };
            
            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `date-calculations-${new Date().toISOString().split('T')[0]}.json`;
            a.click();
            URL.revokeObjectURL(url);
        }
    </script>
</body>

</html>